<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <title>手机登录</title>
    <style>
        body {
            /*background: url("../image/login_bg.png") no-repeat;*/
            background: url("../image/loginbg.png") no-repeat;
            
            width: 100%;
            height: 50px;
            background-size: 100% 100%;
            text-align: center;  
        }

        .aui-content {
            width: 85%;
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
        }

        .aui-form {
            position: static;
            border-radius: 5px;
        }

        .aui-input-row {
            position: static;
            width: 100%;
        }

        .aui-input-row .aui-input-addon {
            padding-left: 15px;
        }
        
        .aui-btn-block{
           padding: 8px 0px; 
        }


        .vali {
            margin-top: 4px;
            float: right;
            background-color: #fff;
            border: none;
            border-left: 1px solid #ccc;
            border-radius: 0;
        }

        #mobile,#validate{
            padding:10px 10px;
        }

        #validate {
            width: 50%;
        }

        .aui-btn-row {
            padding: 20px 0 20px 0;
            position: static;
        }

        .login_name {
            color: #ffffff;
        }

        .aui-btn-info {
            color: #ffffff;
            background-color: #327AFA;
            border: 1px solid #327AFA;
        }
    </style>
</head>
<body>
<div class="aui-content">
    <div class="aui-form">
        <div class="aui-input-row" style="border-bottom: 1px solid #ccc;">
            <label class="aui-input-addon">手机号</label>
            <input type="tel" class="aui-input" placeholder="请输入手机号码" id="mobile">
        </div>
        <div class="aui-input-row">
            <label class="aui-input-addon">验证码</label>
            <input type="tel" id="validate" class="aui-input validate" placeholder="请输入验证码"/>

            <div class="aui-btn vali" tapmode onclick="getVerify()" id="sendVerify">获取验证码</div>
        </div>
    </div>
    <div class="aui-btn-row">
        <div class="aui-btn aui-btn-info aui-btn-block" tapmode onclick="login()">
            登录
        </div>
    </div>
</div>
<div class="login_name">   
    <span tapmode onclick="loginPass()">账号密码登录</span>
    <i class="aui-iconfont aui-icon-roundright"></i>
</div>
</div>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
    }

    function loginPass() {
        // api.openWin({
        //     name: 'loginPass_win',
        //     url: 'loginPass_win.html',
        //     reload: true,
        //     //delay: 300
        // });
        api.closeToWin({
            name : 'loginPass_win',
            url: 'loginPass_win.html',
            animation : {
                type : 'flip',
                subType : 'from_bottom',
                duration : 500
            }
        });
    }

        apiready = function() {
            api.parseTapmode();
        }

        function login() {
            var mobile = $api.val($api.byId('mobile'));
            var validate = $api.val($api.byId('validate'));
            if (mobile && validate) {
                $('input').each(function(){
                    $(this).blur();
                })
                api.showProgress({
                    style: 'default',
                    animationType: 'fade',
                    title: '正在登陆...',
                    text: '',
                    modal: true
                });


                loginUrl = 'Login/dynamicPasswordLogin/mobile/'+ mobile +'/verify/'+ validate;
                var data = {};
                // data['mobile'] = mobile;
                // data['validate'] = validate;
                ajaxRequest(loginUrl, 'get', data, function(ret, err) {
                    if (ret) {
                        if (ret.status == 1) {
                            $api.clearStorage();
                            $api.setStorage('user_id', '' + ret.msg.userid + '');
                            $api.setStorage('group_id', '' + ret.msg.groupid + '');
                            $api.setStorage('user_name', '' + ret.msg.username + '');
                            $api.setStorage('nickname', '' + ret.msg.nickname + '');
                            $api.setStorage('company', '' + ret.msg.company + '');
                            $api.setStorage('money', '' + ret.msg.money + '');
                            $api.setStorage('online', '' + ret.msg.online + '');
                            $api.setStorage('message', '' + ret.msg.message + '');
                            $api.setStorage('head_pic', '' + ret.msg.head_portrait + '');
                            $api.setStorage('chat', '' + ret.msg.chat + '');
                            $api.setStorage('credit', '' + ret.msg.credit + '');
                            $api.setStorage('collect', '' + ret.msg.collect + '');
                            $api.setStorage('rongcloud_token', '' + ret.msg.rongcloud_token + '');
                            // api.toast({
                            //     msg : '登录成功',
                            //     duration : 2000,
                            //     location : 'bottom'
                            // });
                            //触发登录监听
                            api.sendEvent({
                                name : 'reGetMyInfo',
                                extra : {
                                    key : 'true'
                                }
                            })
                            setTimeout(function() {
                                api.hideProgress();
                                //关闭到指定窗口，最上面显示的窗口到指定name窗口间的所有窗口都会被关闭
                                api.closeToWin({
                                    name : 'root',
                                    animation : {
                                        type : 'flip',
                                        subType : 'from_bottom',
                                        duration : 500
                                    }
                                });
                            }, 1000);
                        } else {
                            api.hideProgress();
                            api.toast({
                                msg : ret.msg,
                                duration : 2000,
                                location : 'bottom'
                            });
                        }
                    } else {
                        api.hideProgress();
                        api.toast({
                            msg : '登录失败',
                            duration : 2000,
                            location : 'bottom'
                        });
                    }
                })
            } else {
                api.toast({
                    msg : '请输入手机号或验证码',
                    duration : 2000,
                    location : 'bottom'
                });
            }
        }

        function getVerify() {
            var mobile = $api.val($api.byId('mobile'));
            var partten = /^1[3-9]\d{9}$/;
            if (!partten.test(mobile)) {
                api.toast({
                    msg : '请输入正确的手机号',
                    duration : 2000,
                    location : 'bottom'
                });
                return false;
            };
            //验证手机是否注册过
            var url = 'register/verifyMobile/mobile/' + mobile;
            ajaxRequest(url, 'get', '', function(ret, err) {
                if (ret.status == '0') {
                    $('#validate').get(0).focus();
                    //发送验证码
                    var url = 'register/verifyMobiled/mobile/' + mobile;
                    // var data = {};或直接传'' unll
                    var data = {};
                    ajaxRequest(url, 'get', data, function(ret, err) {
                        if (ret.status == 1) {
                            var sendVerify = $api.byId('sendVerify');
                            $api.removeAttr(sendVerify, 'onclick');
                            //提交成功前不可更改，防止用户发送后用其他号码注册 或者 在服务端验证
                            var readonly_mobile = $api.byId('mobile');
                            $api.attr(readonly_mobile, 'readOnly', 'true');
                            $api.html(sendVerify, '已发送(<span id="GetVerify">60</span>)');
                            times = 60;
                            isinerval = setInterval("CountDown()", 1000);
                        } else {
                            api.toast({
                                msg : '短信发送失败',
                                duration : 2000,
                                location : 'bottom'
                            });
                        }
                    });
                } else {
                    api.toast({
                        msg : '请先注册成为会员',
                        duration : 2000,
                        location : 'bottom'
                    });
                    return false;
                }
            });
        }

        function CountDown() {
            if (times < 1) {
                //提交成功前不可更改，防止用户发送后用其他号码注册 或者 在服务端验证
                var readonly_mobile = $api.byId('mobile');
                $api.removeAttr(readonly_mobile, 'readOnly');
                var sendVerify = $api.byId('sendVerify');
                $api.attr(sendVerify, 'onclick', 'getVerify()');
                $api.html(sendVerify, '重新获取');
                clearInterval(isinerval);
                return;
            }
            var getVerify = $api.byId('GetVerify');
            $api.html(getVerify, '' + times + '');
            times--;
        }
    </script>
</body>
</html>